<template>
  <el-scrollbar>
    <div>
      <div class="header">
        <div class="main">
          <div class="df" style="align-items: normal">
            <div class="titleLeft">测评</div>
            <div class="titleRight curr" @click="handleGoReport">我的报告</div>
          </div>
        </div>
      </div>
      <div class="backimg">
        <div class="main">
          <!--头部导航栏-->
          <div class="zyheader" @click="selectTabChange">
            <div class="zyheader-top"></div>
            <ProcessedImage
              class="zyheader-img"
              :src="src"
              params="imageView2/2/h/228"
              mode="background"
            >
              <div class="zyheader-size">
                <h2 class="zyheader-name">专业定位测评</h2>
                <div class="zyheader-center-size">
                  从兴趣、性格、能力、学科优势和职业价值观 <br />
                  五大维度帮你在全面认识自己的基础上，推荐合适专业。
                </div>
                <div class="zyheader-size-total">
                  <span style="color: #fff; font-size: 16px">300w + </span>
                  人已完成
                </div>
              </div>
            </ProcessedImage>

            <!-- <div class="zyheader-img2" style="cursor: pointer">
              <div class="zyheader-size">
                <h2 class="zyheader-name">专业定位测评</h2>
                <div class="zyheader-center-size">
                  从兴趣、性格、能力、学科优势和职业价值观 <br />
                  五大维度帮你在全面认识自己的基础上，推荐合适专业。
                </div>
                <div class="zyheader-size-total">
                  <span style="color: #fff; font-size: 16px">300w + </span>
                  人已完成
                </div>
              </div>
            </div> -->
          </div>
          <!-- 学习状态-->
          <div class="studyStatus df">
            <div class="studyLeft"></div>
            <div class="studyName">学习状态</div>
          </div>
          <!--测评内容信息-->
          <div class="content-item">
            <div
              class="contentSize"
              v-for="(item, index) in appraisalList"
              :key="item.title"
              @click="selectTabChange(index)"
            >
              <img :src="item.pic" />
              <div class="content-info">
                <p class="contentName">{{ item.title }}</p>
                <p class="contentdesc">
                  {{ item.info }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
  <loginCard ref="loginCardRef" />
</template>
<script setup>
import { ref } from 'vue';
import { getToken } from '@/utils/auth';
import { useRouter } from 'vue-router';

import loginCard from '@/components/LoginCard';
import xg from '@/assets/images/xg.png';
import nl from '@/assets/images/nl.png';
import xueke from '@/assets/images/xueke.png';
import zhiye from '@/assets/images/zhiye.png';
import zyqingxiang from '@/assets/images/zyqingxiang.png';
const loginCardRef = ref('');
const router = useRouter();
const src = require('@/assets/images/appraisal1.png');

const appraisalList = ref([
  {
    title: '性格',
    pic: xg,
    info: '您想了解自己的性格特点吗？快来试试MBTI测试吧！这是一种经典的性格测试，可以帮助您更好地了解自己，以及与他人的互动模式。让MBTI测试帮助您发现自己，改变未来！',
  },
  {
    title: '能力',
    pic: nl,
    info: '可以帮助你发掘自身潜能，提升职业发展潜力，让你更好地发挥自己的优势，获得更好的就业机会，让你走上成功之路！',
  },
  {
    title: '兴趣',
    pic: zhiye,
    info: '您想了解自己的职业兴趣吗？那么，就来试试霍兰德职业兴趣测试吧！它可以帮助您更好地了解自己，找到最适合您的职业。它可以帮助您更有效地规划您的职业生涯，为您提供有价值的参考。',
  },
  {
    title: '学科优势',
    pic: xueke,
    info: '专业解读孩子的学习特长，帮助家长定制孩子的学习计划，让孩子更好地发挥所长，走出自己的路，实现梦想！',
  },
  {
    title: '职业倾向',
    pic: zyqingxiang,
    info: '每个人都有自己的职业梦想，但是却苦于找不到合适的路径，职业锚测试将为你提供一条明确的职业发展路径，让你更快更准确地实现职业梦想，快来职业锚测试，让你的职业梦想变为现实！',
  },
]);
function selectTabChange() {
  if (!getToken()) {
    loginCardRef.value.handleVisibleShow();
    return;
  } else {
    router.push({
      path: '/mobile',
    });
  }
}
const handleGoReport = () => {
  router.push({
    path: '/ping',
  });
};
</script>
<style lang="scss" scoped>
.backimg {
  background: url('@/assets/images/appraisal.png') -100px -200px no-repeat;
  background-size: 2500px;
  padding-bottom: 150px;

  .content-item {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .contentSize {
      margin-bottom: 30px;
      width: 590px;
      height: 145px;
      background: #fafafa;
      border-radius: 8px 8px 8px 8px;
      cursor: pointer;
      display: flex;

      .content-info {
        .contentName {
          height: 16px;
          font-size: 16px;
          font-weight: 600;
          color: #222;
          line-height: 16px;
          margin-top: 16px;
        }

        .contentdesc {
          margin-top: 12px;
          height: 63px;
          font-size: 14px;
          font-weight: 400;
          color: #999;
          line-height: 21px;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 3;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }

        .constant-time {
          margin-top: 9px;
          height: 12px;
          font-size: 12px;
          font-weight: 400;
          color: #666;
          line-height: 12px;
        }
      }

      img {
        max-width: 248px;
        max-height: 139px;
        margin-right: 18px;
        margin-left: 18px;
        transform: translateY(-10px);
        border-radius: 8px 8px 8px 8px;
      }
    }
  }

  .studyStatus {
    margin-top: 24px;
    margin-bottom: 40px;

    .studyLeft {
      width: 4px;
      height: 18px;
      background: var(--active-text);
      display: inline-block;
      margin-right: 8px;
    }
  }

  .zyheader {
    width: 100%;
    height: 258px;
    padding-top: 30px;
    position: relative;

    .zyheader-img {
      // background-image: url('@/assets/images/appraisal1.png');
      // background-size: 100% 100%;
      // background-repeat: no-repeat;
      // height: 228px;
      cursor: pointer;

      .zyheader-size {
        padding-left: 200px;
        padding-top: 30px;
        width: auto;

        .zyheader-name {
          height: 40px;
          font-size: 40px;
          color: #fff;
          line-height: 40px;
          font-style: normal;
          font-weight: 400;
        }

        .zyheader-center-size {
          width: 412px;
          height: 42px;
          font-size: 14px;
          font-weight: 400;
          color: #fff;
          line-height: 21px;
          margin-top: 20px;
        }

        .zyheader-size-total {
          margin-top: 42px;
          height: 14px;
          font-size: 14px;
          font-weight: 400;
          color: hsla(0, 0%, 100%, 0.6);
          line-height: 14px;
        }
      }
    }

    .zyheader-top {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0.05;
      width: 100%;
      height: 100%;
    }
  }
}

.header {
  width: 100%;
  background-color: #fff;
  padding-top: 20px;
  border-bottom: 1px solid #f2f2f2;
  position: sticky;
  top: 0;
  z-index: 99;

  .titleLeft {
    border-bottom: 4px solid var(--active-text);
    padding-bottom: 10px;
    margin-right: 50px;
  }
}
</style>
